import { Graph, Dom, Node } from '@antv/x6';

// 导出一个名为 FlowChartEllipse 的常量，该常量是通过 Graph.registerNode 方法注册的一个自定义节点类型（椭圆）
export const FlowChartEllipse = Graph.registerNode('flow-chart-ellipse', {
  // 继承自 'rect' 节点类型，表示这个节点是基于矩形节点进行扩展的
  inherit: 'rect',
  // 设置节点的宽度为 80 像素
  width: 80,
  // 设置节点的高度为 42 像素
  height: 42,
  // 定义节点的属性
  attrs: {
    
    // body 属性定义了矩形主体的样式
    body: {
       rx: 24, ry: 24 ,
      // 设置矩形边框颜色为 #5F95FF
      stroke: '#5F95FF',
      // 设置矩形边框宽度为 1 像素
      strokeWidth: 1,
      // 设置矩形填充颜色为白色
      fill: '#ffffff',
    },
    // fo 属性定义了 foreignObject 的引用尺寸
    fo: {
      // foreignObject 的宽度引用父容器的 100%
      refWidth: '100%',
      // foreignObject 的高度引用父容器的 100%
      refHeight: '100%',
    },
    // foBody 属性定义了 foreignObject 内部 body 标签的样式
    foBody: {
      // 设置命名空间为 XHTML
      xmlns: Dom.ns.xhtml,
      // 设置 body 标签的样式
      style: {
        // 宽度为 100%
        width: '100%',
        // 高度为 100%
        height: '100%',
        // 使用 flex 布局
        display: 'flex',
        // 水平居中
        justifyContent: 'center',
        // 垂直居中
        alignItems: 'center',
      },
    },
    // 'edit-text' 属性定义了可编辑文本的样式
    'edit-text': {
      // 设置内容可编辑
      contenteditable: 'true',
      // 设置 CSS 类名为 'x6-edit-text'
      class: 'x6-edit-text',
      // 设置文本样式
      style: {
        // 宽度为 100%
        width: '100%',
        // 文本居中对齐
        textAlign: 'center',
        // 字体大小为 12 像素
        fontSize: 12,
        // 文本颜色为半透明黑色
        color: 'rgba(0,0,0,0.85)',
      },
    },
    // text 属性定义了文本标签的样式
    text: {
      // 字体大小为 12 像素
      fontSize: 12,
      // 文本颜色为深黑色
      fill: '#080808',
    },
  },
  // 定义节点的标记结构
  markup: [
    {
      // 矩形标签，选择器为 'body'
      tagName: 'rect',
      selector: 'body',
    },
    {
      // 文本标签，选择器为 'text'
      tagName: 'text',
      selector: 'text',
    },
    {
      // foreignObject 标签，选择器为 'fo'
      tagName: 'foreignObject',
      selector: 'fo',
      // 定义 foreignObject 的子元素
      children: [
        {
          // 设置命名空间为 XHTML
          ns: Dom.ns.xhtml,
          // body 标签，选择器为 'foBody'
          tagName: 'body',
          selector: 'foBody',
          // 定义 body 标签的子元素
          children: [
            {
              // div 标签，选择器为 'edit-text'
              tagName: 'div',
              selector: 'edit-text',
            },
          ],
        },
      ],
    },
  ],
  ports: {
    // 定义一个名为 groups 的对象，用于存储不同组的配置
    groups: {
      // 定义一个名为 top 的组
      top: {
        // 设置该组的定位为 'top'，表示在顶部
        position: 'top',
        // 定义该组的属性
        attrs: {
          // 定义一个名为 circle 的属性，用于描述一个圆
          circle: {
            // 设置圆的半径为 3
            r: 3,
            // 设置圆是否为磁吸点，true 表示是
            magnet: true,
            // 设置圆的边框颜色为 '#5F95FF'
            stroke: '#5F95FF',
            // 设置圆的边框宽度为 1
            strokeWidth: 1,
            // 设置圆的填充颜色为白色
            fill: '#fff',
            // 定义圆的样式
            style: {
              // 设置圆的可见性为隐藏
              visibility: 'hidden',
            },
          },
        },
      },
      
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
               group: 'top',
              },
      {
       
        group: 'right',
              },
      {
      
        group: 'left',
              },
      {
       
        group: 'bottom',
      },
      
    ],
  },
});
// 导出一个名为 FlowCharTrhombus 的常量，该常量是通过 Graph.registerNode 方法注册的一个自定义节点类型（菱形）
export const FlowCharTrhombus = Graph.registerNode('flow-chart-rhombus', {
  // 继承自 'rect' 节点类型，表示这个节点是基于矩形节点进行扩展的
  inherit: 'rect',
  // 设置节点的宽度为 80 像素
  width: 80,
  // 设置节点的高度为 42 像素
  height: 42,
  // 定义节点的属性
  attrs: {
    
    // body 属性定义了矩形主体的样式
    body: {
      // 设置矩形边框颜色为 #5F95FF
      stroke: '#5F95FF',
      // 设置矩形边框宽度为 1 像素
      strokeWidth: 1,
      // 设置矩形填充颜色为白色
      fill: '#ffffff',
    },
    // fo 属性定义了 foreignObject 的引用尺寸
    fo: {
      // foreignObject 的宽度引用父容器的 100%
      refWidth: '100%',
      // foreignObject 的高度引用父容器的 100%
      refHeight: '100%',
    },
    // foBody 属性定义了 foreignObject 内部 body 标签的样式
    foBody: {
      // 设置命名空间为 XHTML
      xmlns: Dom.ns.xhtml,
      // 设置 body 标签的样式
      style: {
        // 宽度为 100%
        width: '100%',
        // 高度为 100%
        height: '100%',
        // 使用 flex 布局
        display: 'flex',
        // 水平居中
        justifyContent: 'center',
        // 垂直居中
        alignItems: 'center',
      },
    },
    // 'edit-text' 属性定义了可编辑文本的样式
    'edit-text': {
      // 设置内容可编辑
      contenteditable: 'true',
      // 设置 CSS 类名为 'x6-edit-text'
      class: 'x6-edit-text',
      // 设置文本样式
      style: {
        // 宽度为 100%
        width: '100%',
        // 文本居中对齐
        textAlign: 'center',
        // 字体大小为 12 像素
        fontSize: 12,
        // 文本颜色为半透明黑色
        color: 'rgba(0,0,0,0.85)',
      },
    },
    // text 属性定义了文本标签的样式
    text: {
      // 字体大小为 12 像素
      fontSize: 12,
      // 文本颜色为深黑色
      fill: '#080808',
    },
  },
  // 定义节点的标记结构
  markup: [
    {
      // 矩形标签，选择器为 'body'
      tagName: 'rect',
      selector: 'body',
    },
    {
      // 文本标签，选择器为 'text'
      tagName: 'text',
      selector: 'text',
    },
    {
      // foreignObject 标签，选择器为 'fo'
      tagName: 'foreignObject',
      selector: 'fo',
      // 定义 foreignObject 的子元素
      children: [
        {
          // 设置命名空间为 XHTML
          ns: Dom.ns.xhtml,
          // body 标签，选择器为 'foBody'
          tagName: 'body',
          selector: 'foBody',
          // 定义 body 标签的子元素
          children: [
            {
              // div 标签，选择器为 'edit-text'
              tagName: 'div',
              selector: 'edit-text',
            },
          ],
        },
      ],
    },
  ],
  ports: {
    // 定义一个名为 groups 的对象，用于存储不同组的配置
    groups: {
      // 定义一个名为 top 的组
      top: {
        // 设置该组的定位为 'top'，表示在顶部
        position: {
          name:'top',
          args: {
            dx: -26,
          },
        },
        // 定义该组的属性
        attrs: {
          // 定义一个名为 circle 的属性，用于描述一个圆
          circle: {
            // 设置圆的半径为 3
            r: 3,
            // 设置圆是否为磁吸点，true 表示是
            magnet: true,
            // 设置圆的边框颜色为 '#5F95FF'
            stroke: '#5F95FF',
            // 设置圆的边框宽度为 1
            strokeWidth: 1,
            // 设置圆的填充颜色为白色
            fill: '#fff',
            // 定义圆的样式
            style: {
              // 设置圆的可见性为隐藏
              visibility: 'hidden',
            },
          },
        },
       
      },
      
      right: {
        position: {
          name: 'right',
          args: {
            dy: -26,
          },
        },
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
       
      },
      bottom: {
        position: {
          name:'bottom',
          args: {
            dx: 26,
          },
        },
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
       
      },
      left: {
        position:{
          name: 'left',
          args: {
            dy: 26,
          },
        },
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
        
      },
    },
    items: [
      {
        group: 'top',
              },
      {
       
        group: 'right',
              },
      {
      
        group: 'left',
              },
      {
       
        group: 'bottom',
      },
      
    ],
  },
});

// 导出一个名为 FlowChartRect 的常量，该常量是通过 Graph.registerNode 方法注册的一个自定义节点类型
export const FlowChartRect = Graph.registerNode('flow-chart-rect', {
  // 继承自 'rect' 节点类型，表示这个节点是基于矩形节点进行扩展的
  inherit: 'rect',
  // 设置节点的宽度为 80 像素
  width: 80,
  // 设置节点的高度为 42 像素
  height: 42,
  // 定义节点的属性
  attrs: {
    // body 属性定义了矩形主体的样式
    body: {
      // 设置矩形边框颜色为 #5F95FF
      stroke: '#5F95FF',
      // 设置矩形边框宽度为 1 像素
      strokeWidth: 1,
      // 设置矩形填充颜色为白色
      fill: '#ffffff',
    },
    // fo 属性定义了 foreignObject 的引用尺寸
    fo: {
      // foreignObject 的宽度引用父容器的 100%
      refWidth: '100%',
      // foreignObject 的高度引用父容器的 100%
      refHeight: '100%',
    },
    // foBody 属性定义了 foreignObject 内部 body 标签的样式
    foBody: {
      // 设置命名空间为 XHTML
      xmlns: Dom.ns.xhtml,
      // 设置 body 标签的样式
      style: {
        // 宽度为 100%
        width: '100%',
        // 高度为 100%
        height: '100%',
        // 使用 flex 布局
        display: 'flex',
        // 水平居中
        justifyContent: 'center',
        // 垂直居中
        alignItems: 'center',
      },
    },
    // 'edit-text' 属性定义了可编辑文本的样式
    'edit-text': {
      // 设置内容可编辑
      contenteditable: 'true',
      // 设置 CSS 类名为 'x6-edit-text'
      class: 'x6-edit-text',
      // 设置文本样式
      style: {
        // 宽度为 100%
        width: '100%',
        // 文本居中对齐
        textAlign: 'center',
        // 字体大小为 12 像素
        fontSize: 12,
        // 文本颜色为半透明黑色
        color: 'rgba(0,0,0,0.85)',
      },
    },
    // text 属性定义了文本标签的样式
    text: {
      // 字体大小为 12 像素
      fontSize: 12,
      // 文本颜色为深黑色
      fill: '#080808',
    },
  },
  // 定义节点的标记结构
  markup: [
    {
      // 矩形标签，选择器为 'body'
      tagName: 'rect',
      selector: 'body',
    },
    {
      // 文本标签，选择器为 'text'
      tagName: 'text',
      selector: 'text',
    },
    {
      // foreignObject 标签，选择器为 'fo'
      tagName: 'foreignObject',
      selector: 'fo',
      // 定义 foreignObject 的子元素
      children: [
        {
          // 设置命名空间为 XHTML
          ns: Dom.ns.xhtml,
          // body 标签，选择器为 'foBody'
          tagName: 'body',
          selector: 'foBody',
          // 定义 body 标签的子元素
          children: [
            {
              // div 标签，选择器为 'edit-text'
              tagName: 'div',
              selector: 'edit-text',
            },
          ],
        },
      ],
    },
  ],
  ports: {
    // 定义一个名为 groups 的对象，用于存储不同组的配置
    groups: {
      // 定义一个名为 top 的组
      top: {
        // 设置该组的定位为 'top'，表示在顶部
        position: 'top',
        // 定义该组的属性
        attrs: {
          // 定义一个名为 circle 的属性，用于描述一个圆
          circle: {
            // 设置圆的半径为 3
            r: 3,
            // 设置圆是否为磁吸点，true 表示是
            magnet: true,
            // 设置圆的边框颜色为 '#5F95FF'
            stroke: '#5F95FF',
            // 设置圆的边框宽度为 1
            strokeWidth: 1,
            // 设置圆的填充颜色为白色
            fill: '#fff',
            // 定义圆的样式
            style: {
              // 设置圆的可见性为隐藏
              visibility: 'hidden',
            },
          },
        },
      },
      
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        id: 'port1',
        group: 'top',
              },
      {
        id: 'port2',
        group: 'top',
              },
      {
        id: 'port3',
        group: 'top',
              },
      {
        id: 'port4',
        group: 'right',
      },
      {
        id: 'port5',
        group: 'right',
      },
      {
        id: 'port6',
        group: 'right',
      },
      {
        id: 'port7',
        group: 'bottom',
      },
      {
        id: 'port8',
        group: 'bottom',
      },
      {
        id: 'port9',
        group: 'bottom',
      },
      {
        id: 'port10',
        group: 'left',
      },
      {
        id: 'port11',
        group: 'left',
      },
      {
        id: 'port12',
        group: 'left',
      }
    ],
  },
});

// 导出一个名为 FlowChartImageRect 的常量，该常量是通过 Graph.registerNode 方法注册的一个自定义节点类型
export const FlowChartImageRect = Graph.registerNode('flow-chart-image-rect', {
  inherit: 'rect',
  width: 200,
  height: 60,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: 'rgba(95,149,255,0.05)',
    },
     
      },
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'image',
      selector: 'image',
    },
    {
      tagName: 'text',
      selector: 'title',
    },
    {
      tagName: 'text',
      selector: 'text',
    },
  ],
  ports: {
    // 定义一个名为 groups 的对象，用于存储不同组的配置
    groups: {
      // 定义一个名为 top 的组
      top: {
        // 设置该组的定位为 'top'，表示在顶部
        position: 'top',
        // 定义该组的属性
        attrs: {
          // 定义一个名为 circle 的属性，用于描述一个圆
          circle: {
            // 设置圆的半径为 3
            r: 3,
            // 设置圆是否为磁吸点，true 表示是
            magnet: true,
            // 设置圆的边框颜色为 '#5F95FF'
            stroke: '#5F95FF',
            // 设置圆的边框宽度为 1
            strokeWidth: 1,
            // 设置圆的填充颜色为白色
            fill: '#fff',
            // 定义圆的样式
            style: {
              // 设置圆的可见性为隐藏
              visibility: 'hidden',
            },
          },
        },
      },
      
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        id: 'port1',
        group: 'top',
              },
      {
        id: 'port2',
        group: 'top',
              },
      {
        id: 'port3',
        group: 'top',
              },
      {
        id: 'port4',
        group: 'right',
      },
      {
        id: 'port5',
        group: 'right',
      },
      {
        id: 'port6',
        group: 'right',
      },
      {
        id: 'port7',
        group: 'bottom',
      },
      {
        id: 'port8',
        group: 'bottom',
      },
      {
        id: 'port9',
        group: 'bottom',
      },
      {
        id: 'port10',
        group: 'left',
      },
      {
        id: 'port11',
        group: 'left',
      },
      {
        id: 'port12',
        group: 'left',
      }
    ],
  },
});

export const FlowChartTitleRect = Graph.registerNode('flow-chart-title-rect', {
  inherit: 'rect',
  width: 200,
  height: 68,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: 'rgba(95,149,255,0.05)',
    },
    head: {
      refWidth: '100%',
      stroke: 'transparent',
      height: 28,
      fill: 'rgb(95,149,255)',
    },
    image: {
      'xlink:href': 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
      height: 16,
      x: 6,
      y: 6,
    },
    title: {
      text: 'Node',
      refX: 30,
      refY: 9,
      fill: '#ffffff',
      fontSize: 12,
      'text-anchor': 'start',
    },
    text: {
      text: 'this is content text',
      refX: 8,
      refY: 45,
      fontSize: 12,
      fill: 'rgba(0,0,0,0.6)',
      'text-anchor': 'start',
    },
  },
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'rect',
      selector: 'head',
    },
    {
      tagName: 'image',
      selector: 'image',
    },
    {
      tagName: 'text',
      selector: 'title',
    },
    {
      tagName: 'text',
      selector: 'text',
    },
  ],
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        group: 'top',
      },
      {
        group: 'right',
      },
      {
        group: 'bottom',
      },
      {
        group: 'left',
      },
    ],
  },
});

export const FlowChartAnimateText = Graph.registerNode('flow-chart-animate-text', {
  inherit: 'rect',
  width: 200,
  height: 60,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: 'rgba(95,149,255,0.05)',
    },
    text1: {
      class: 'animate-text1',
      text: 'AntV X6',
      fontSize: 32,
    },
    text2: {
      class: 'animate-text2',
      text: 'AntV X6',
      fontSize: 32,
    },
  },
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'text',
      selector: 'text1',
    },
    {
      tagName: 'text',
      selector: 'text2',
    },
  ],
});

export class NodeGroup extends Node {
  private collapsed = true;

  protected postprocess() {
    this.toggleCollapse(true);
  }

  isCollapsed() {
    return this.collapsed;
  }

  // 定义一个方法 toggleCollapse，用于切换折叠状态
  toggleCollapse(collapsed?: boolean) {
    // 如果传入的 collapsed 参数为 undefined 或 null，则取反当前折叠状态
    // 否则，直接使用传入的 collapsed 值
    const target = collapsed == null ? !this.collapsed : collapsed;
    // 如果目标状态为折叠
    if (target) {
      // 设置按钮符号的路径为折叠状态
      this.attr('buttonSign', { d: 'M 1 5 9 5 M 5 1 5 9' });
      // 调整组件的大小为折叠状态的大小
      this.resize(200, 40);
    } else {
      // 如果目标状态为展开
      // 设置按钮符号的路径为展开状态
      this.attr('buttonSign', { d: 'M 2 5 8 5' });
      // 调整组件的大小为展开状态的大小
      this.resize(240, 240);
    }
    // 更新当前折叠状态为目标状态
    this.collapsed = target;
  }
}

NodeGroup.config({
  shape: 'rect',
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'image',
      selector: 'image',
    },
    {
      tagName: 'text',
      selector: 'text',
    },
    {
      tagName: 'g',
      selector: 'buttonGroup',
      children: [
        {
          tagName: 'rect',
          selector: 'button',
          attrs: {
            'pointer-events': 'visiblePainted',
          },
        },
        {
          tagName: 'path',
          selector: 'buttonSign',
          attrs: {
            fill: 'none',
            'pointer-events': 'none',
          },
        },
      ],
    },
  ],
  // attrs: {
  //   body: {
  //     refWidth: '100%',
  //     refHeight: '100%',
  //     strokeWidth: 1,
  //     fill: 'rgba(95,149,255,0.05)',
  //     stroke: '#5F95FF',
  //   },
  //   image: {
  //     'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_0b51a4/afts/img/A*X4e0TrDsEiIAAAAAAAAAAAAAARQnAQ',
  //     width: 16,
  //     height: 16,
  //     x: 8,
  //     y: 12,
  //   },
  //   text: {
  //     fontSize: 12,
  //     fill: 'rgba(0,0,0,0.85)',
  //     refX: 30,
  //     refY: 15,
  //   },
  //   buttonGroup: {
  //     refX: '100%',
  //     refX2: -25,
  //     refY: 13,
  //   },
  //   button: {
  //     height: 14,
  //     width: 16,
  //     rx: 2,
  //     ry: 2,
  //     fill: '#f5f5f5',
  //     stroke: '#ccc',
  //     cursor: 'pointer',
  //     event: 'node:collapse',
  //   },
  //   buttonSign: {
  //     refX: 3,
  //     refY: 2,
  //     stroke: '#808080',
  //   },
  // },
});

Graph.registerNode('groupNode', NodeGroup);
